<template>
  <router-view></router-view>
  <!-- reactive使用响应式对象 -->
  <div>{{ state.msg }}的年龄为{{ state.age }}</div>
  <div>{{ state.doubleAge }}</div>

  <!-- <div>hahah{{ state.copy.age }}</div> -->
  <button @click="add">加1</button>
</template>

<script>
import { computed, reactive, readonly, watch, watchEffect } from "vue"; //引入ref
export default {
  name: "App",
  setup() {
    // 创建响应式对象
    const state = reactive({
      msg: "meng",
      age: 18,
      doubleAge: computed(() => {
        return state.age * 2;
      }),
    });
    const copy = readonly(state);
    watch(() => {
      state.age,
        (newValue, oldVal) => {
          console.log(`原值为${oldVal}`);
          console.log(`新值为${newValue}`);
        };
    });
    // 1秒后将state.count的值+1
    setTimeout(() => {
      state.age++;
    }, 1000);
    watchEffect(() => {
      // 依赖追踪
      console.log(`age值${copy.age}`);
      console.log(`age11值${state.age}`);
    });

    function add() {
      state.age += 1;
    }
    return { add, state, copy };
  },
};
</script>


